<template>
  <div class="left-container-under-player" data-v-66bd1e0b>
    <div id="v_desc" class="video-desc-container" data-v-1d530b8d data-v-66bd1e0b>
      <div class="basic-desc-info" data-v-1d530b8d style="height: auto;">
        <span
          class="desc-info-text"
          data-v-1d530b8d
        >{{this.forCommentVideo.videoInfo.videoIntroduct}}</span>
         
      </div>
    </div>
    <div id="v_tag" class="video-tag-container" data-v-934a50f8 data-v-66bd1e0b>
      <div class="tag-panel" data-v-934a50f8>
        <div
          v-for="i in  this.video.videoInfo.videoPartition"
          :key="i"
          class="tag not-btn-tag"
          data-v-934a50f8
        >
   
          <div class="newchannel-tag" data-v-606abc4e data-v-934a50f8>
            <span data-v-606abc4e class="popover-reference">
              <!-- 所属分区的a标签 -->
              <a
                data-v-606abc4e
                aria-labelby="new_channel"
           
                
                class="tag-link newchannel-link van-popover__reference"
                aria-describedby="van-popover-6336"
                tabindex="0"
              >{{i}}</a>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div id="comment" class="comment-m-v1" data-v-66bd1e0b>
      <div class="comment" data-v-app>
        <div class="bili-comment browser-pc">
          <div class="comment-container">
            <div class="reply-header" data-v-7bb97476>
              <div class="reply-navigation" data-v-7bb97476>
                <ul class="nav-bar" data-v-7bb97476>
                  <li class="nav-title" data-v-7bb97476>
                    <span class="nav-title-text" data-v-7bb97476>评论</span>
                    <span class="total-reply" data-v-7bb97476></span>
                  </li>

                  <li class="nav-sort hot" data-v-7bb97476>
                    <div class="hot-sort" data-v-7bb97476>最热</div>
                    <div class="part-symbol" data-v-7bb97476></div>
                    <div class="time-sort" data-v-7bb97476>最新</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="reply-warp" data-v-b53d2bc8 style="--49c1251d:150.5px; --21ff6920:668px;">
              <div class="main-reply-box" data-v-b53d2bc8>
                <div class="reply-box" data-v-572457cb data-v-b53d2bc8>
                  <div class="box-normal" data-v-572457cb>
                    <div class="reply-box-avatar" nftavatartype="0" data-v-572457cb>
                      <div class="bili-avatar" style="width: 48px;height:48px;">
                        <img
                          class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                          :data-src="prefixUrl+this.video.loginUser.userAvatar"
                          alt
                          :src="prefixUrl+this.video.loginUser.userAvatar"
                        />
                        <span class="bili-avatar-icon bili-avatar-right-icon bili-avatar-size-48"></span>
                      </div>
                    </div>
                    <div class="reply-box-warp" data-v-572457cb>
                      <textarea
                        class="reply-box-textarea"
                        data-v-572457cb
                        v-model="commentContent"
                        placeholder="评论千万条，等你发一条"
                      ></textarea>
                    </div>
                    <div class="reply-box-send" @click="fabu()" data-v-572457cb>
                      <div class="send-text" data-v-572457cb>发布</div>
                    </div>
                  </div>

                  <!---->
                  <!---->
                </div>
              </div>
  

              <div
                class="reply-list"
                v-for="comment in this.forCommentVideo.commentList"
                :key="comment.commentId"
                data-v-c588f6b4
                data-v-b53d2bc8
              >
                <div
                  class="reply-item"
                  data-v-bc6a99fc
                  data-v-c588f6b4
                  style="--7f5d3be1:undefinedpx; --527b466c:undefinedpx; --5ed7e7ae:#61666d; --3f814708:rgba(NaN,NaN,NaN,NaN); --71844f54:13px; --3df01815:18px; --3491cc49:rgba(NaN,NaN,NaN,NaN); --81d6817c:rgba(NaN,NaN,NaN,NaN); --9ec5b8a4:rgba(NaN,NaN,NaN,NaN); --a6298614:20px;"
                >
                  <!-- 仅用于登录引导实验B蒙层 -->

                  <div class="root-reply-container" data-v-bc6a99fc>
                    <div
                      class="root-reply-avatar"
                      data-user-id="77557766"
                      data-root-reply-id="179133697632"
                      data-v-bc6a99fc
                    >
                      <div class="avatar" data-v-bc6a99fc>
                        <div class="bili-avatar" style="width: 48px;height:48px;">
                          <img
                            class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                            :data-src="prefixUrl+comment.fromUser.userAvatar"
                            alt
                            :src="prefixUrl+comment.fromUser.userAvatar"
                          />
                        </div>
                      </div>
                    </div>
                         
                    <div class="content-warp" data-v-bc6a99fc>
                      <div class="reply-decorate" data-v-bc6a99fc>
                        <div class="user-sailing" data-v-bc6a99fc></div>
                      </div>
                      <div class="user-info" data-v-bc6a99fc>
                        <div
                          class="user-name"
                          style="color:red;font-size:16px"
                          data-v-bc6a99fc
                        >{{comment.fromUser.userName}}</div>
                        <!-- 判断回复人id是否为空，若为空hidden回复对象 -->

                        <div v-if="comment.toUser">
                          <span style=" padding: 10px;">回复</span>
                          <span style="color:red;font-size:16px;">{{comment.toUser.userName}}</span>
                        </div>
                      </div>
                      <div class="root-reply" data-v-bc6a99fc>
                        <span class="reply-content">{{comment.commentContent}}</span>

                        <div class="reply-info" data-v-bc6a99fc>
                          <span
                            class="reply-time"
                            data-v-bc6a99fc
                          >{{comment.createTime.replace(/T/g, " ").replace(/.[\d]{3}Z/)}}</span>

                          <span class="reply-like" data-v-bc6a99fc>
                            <i
                              class="svg-icon like use-color like-icon"
                              data-v-bc6a99fc
                              style="width: 16px; height: 16px;"
                            >
                              <svg
                                t="1636093575017"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="3323"
                                width="200"
                                height="200"
                              >
                                <path
                                  d="M594.176 151.168a34.048 34.048 0 0 0-29.184 10.816c-11.264 13.184-15.872 24.064-21.504 40.064l-1.92 5.632c-5.632 16.128-12.8 36.864-27.648 63.232-25.408 44.928-50.304 74.432-86.208 97.024-23.04 14.528-43.648 26.368-65.024 32.576v419.648a4569.408 4569.408 0 0 0 339.072-4.672c38.72-2.048 72-21.12 88.96-52.032 21.504-39.36 47.168-95.744 63.552-163.008a782.72 782.72 0 0 0 22.528-163.008c0.448-16.832-13.44-32.256-35.328-32.256h-197.312a32 32 0 0 1-28.608-46.336l0.192-0.32 0.64-1.344 2.56-5.504c2.112-4.8 5.12-11.776 8.32-20.16 6.592-17.088 13.568-39.04 16.768-60.416 4.992-33.344 3.776-60.16-9.344-84.992-14.08-26.688-30.016-33.728-40.512-34.944zM691.84 341.12h149.568c52.736 0 100.864 40.192 99.328 98.048a845.888 845.888 0 0 1-24.32 176.384 742.336 742.336 0 0 1-69.632 178.56c-29.184 53.44-84.48 82.304-141.76 85.248-55.68 2.88-138.304 5.952-235.712 5.952-96 0-183.552-3.008-244.672-5.76-66.432-3.136-123.392-51.392-131.008-119.872a1380.672 1380.672 0 0 1-0.768-296.704c7.68-72.768 70.4-121.792 140.032-121.792h97.728c13.76 0 28.16-5.504 62.976-27.456 24.064-15.104 42.432-35.2 64.512-74.24 11.904-21.184 17.408-36.928 22.912-52.8l2.048-5.888c6.656-18.88 14.4-38.4 33.28-60.416a97.984 97.984 0 0 1 85.12-32.768c35.264 4.096 67.776 26.88 89.792 68.608 22.208 42.176 21.888 84.864 16 124.352a342.464 342.464 0 0 1-15.424 60.544z m-393.216 477.248V405.184H232.96c-40.448 0-72.448 27.712-76.352 64.512a1318.912 1318.912 0 0 0 0.64 282.88c3.904 34.752 32.96 61.248 70.4 62.976 20.8 0.96 44.8 1.92 71.04 2.816z"
                                  p-id="3324"
                                  fill="#9499a0"
                                />
                              </svg>
                            </i>
                            <span data-v-bc6a99fc>{{comment.commentLike}}</span>
                          </span>
                          <span class="reply-dislike" data-v-bc6a99fc>
                            <i
                              class="svg-icon dislike use-color dislike-icon"
                              data-v-bc6a99fc
                              style="width: 16px; height: 16px;"
                            >
                              <svg
                                t="1636093677814"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="3933"
                                width="200"
                                height="200"
                              >
                                <path
                                  d="M594.112 872.768a34.048 34.048 0 0 1-29.12-10.816c-11.264-13.248-15.872-24.064-21.504-40.064l-1.92-5.632c-5.632-16.128-12.8-36.864-27.712-63.232-25.344-44.928-50.24-74.432-86.144-97.024-23.104-14.528-43.648-26.432-65.024-32.64V203.84a4570.24 4570.24 0 0 1 339.072 4.672c38.656 2.048 72 21.12 88.896 52.032 21.504 39.36 47.232 95.744 63.552 163.008 16.448 67.52 21.568 123.776 22.592 163.008 0.448 16.832-13.44 32.256-35.392 32.256h-197.248a32 32 0 0 0-28.608 46.336l0.128 0.32 0.64 1.28 2.56 5.568c2.176 4.8 5.12 11.776 8.384 20.16 6.528 17.088 13.568 39.04 16.768 60.416 4.928 33.344 3.712 60.16-9.344 84.992-14.08 26.688-30.016 33.728-40.576 34.944z m97.728-190.016h149.568c52.8 0 100.864-40.128 99.392-97.92a846.336 846.336 0 0 0-24.32-176.448 742.016 742.016 0 0 0-69.632-178.56c-29.248-53.44-84.48-82.304-141.824-85.248-55.68-2.88-138.24-5.952-235.712-5.952-96 0-183.488 3.008-244.672 5.76-66.368 3.136-123.328 51.392-130.944 119.872a1380.608 1380.608 0 0 0-0.768 296.704c7.68 72.768 70.4 121.792 140.032 121.792h97.728c13.76 0 28.16 5.504 62.976 27.392 24.064 15.168 42.432 35.264 64.448 74.368 11.968 21.12 17.472 36.864 22.976 52.736l2.048 5.888c6.656 18.88 14.336 38.4 33.216 60.416 19.456 22.72 51.456 36.736 85.184 32.768 35.2-4.096 67.776-26.88 89.792-68.672 22.208-42.112 21.888-84.8 16-124.288a343.04 343.04 0 0 0-15.488-60.608zM298.688 205.568v413.184H232.96c-40.512 0-72.448-27.712-76.352-64.512a1318.912 1318.912 0 0 1 0.64-282.88c3.904-34.816 32.896-61.248 70.4-62.976 20.8-0.96 44.736-1.92 71.04-2.816z"
                                  p-id="3934"
                                  fill="#9499a0"
                                />
                              </svg>
                            </i>
                            <span data-v-bc6a99fc>{{comment.commentDislike}}</span>
                          </span>

                          <span @click="reply(comment.fromUser)" class="reply-btn" data-v-bc6a99fc>回复</span>
                
                          <el-dialog
                            :title="replyDialogTitlePrefix+fromUser.userName"
                            :visible.sync="dialogVisible"
                            width="30%"
                            :modal="modal"
                          >
                          
                            <el-input
                              type="textarea"
                              :autosize="{ minRows: 7}"
                              maxlength="1000"
                              show-word-limit
                              v-model="commentContent"
                            ></el-input>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogVisible = false">取 消</el-button>
                              <el-button
                                type="primary"
                                @click="confirmReply()"
                              >确 定</el-button>
                            </span>
                          </el-dialog>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="bottom-line" data-v-bc6a99fc></div>
                </div>
              </div>
            </div>
            <div v-if="this.forCommentVideo.total" style="padding:60px;float:right" >
              <!-- :current-page.sync="currentPage" 需要添加.sync，否则点击标签时失效 -->
              <el-pagination
                @size-change="getCommmentList"
                @current-change="getCommmentList"
                :current-page.sync="currentPage"
                :page-sizes="[10, 15, 50, 100,500,1000]"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="this.forCommentVideo.total"
              ></el-pagination>
            </div>
            <div v-if="!this.forCommentVideo.total"><p style="font-size:30px;padding-left:400px;padding-top:100px">空</p></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: ["forCommentVideo"],
  data() {
    return {
      fromUser:'',
      pindaoUrl:'/pindao/',
      replyDialogTitlePrefix: "回复:",
      modal: false,
      dialogVisible: false,
      commentList: "",
      videoPartName: "n",
      videoPartIds: "s",
      isReply: false, //是否是回复评论
      formName: "我叫超级帅",
      toName: "贱帅",

      video: this.forCommentVideo,
      commentContent: "",
      prefixUrl: "http://",
      currentPage: 1,
      pageSize: 10
      // .replace(/T/g, " ").replace(/.[\d]{3}Z/, " ")
    };
  },
  created() {},
  methods: {
    getCommmentList() {
      this.axios({
        method: "post",
        params: {
          videoId: this.video.videoInfo.videoId,
          upId: this.video.videoInfo.upId,
          currentPage: this.currentPage,
          pageSize: this.pageSize
        },
        url: "http://localhost:8095/comment/getCommentByCondition"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.forCommentVideo.commentList = res.data.records;
      
          this.forCommentVideo.total = res.data.total;
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
    },

    publishComment(toId) {
      this.axios({
        method: "post",
        params: {
          upId: this.video.videoInfo.upId,
          videoId: this.video.videoInfo.videoId,
          toId: this.isReply === true ? toId : "",
          commentContent: this.commentContent
        },
        url: "http://localhost:8095/comment/saveComment"
      })
        .then(res => {
          //res.data就是请求后端成功后返回的数据
          this.commentContent = null;
          this.getCommmentList();
          this.$message.success("消息发布成功！");
        })
        .catch(error => {
          this.$message.error(error.response.data.message);
        });
      this.isReply = false;
    },
    reply(val) {
      this.dialogVisible = true;
      this.isReply = true;
      this.fromUser=val;
    },
    fabu() {
      this.isReply = false;
      this.publishComment();
    },
    confirmReply() {
      this.dialogVisible = false;
      
      this.publishComment(this.fromUser.userId);
    },
    
  }
};
</script>

<style scoped lang='scss'>
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}

.bili-comment.browser-pc {
  background-color: var(--bg1);
}
.bili-comment.browser-pc * {
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .bili-comment.browser-pc * {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.bili-comment.browser-pc * ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.bili-comment.browser-pc * a {
  text-decoration: none;
  background-color: transparent;
  color: var(--text_link);
  cursor: pointer;
}
.bili-comment.browser-pc * a:hover {
  color: var(--Lb4);
}
.bili-comment.browser-pc * i {
  font-style: normal;
}
.bili-comment.browser-pc * p {
  margin: 0;
  padding: 0;
}
.bili-comment.browser-pc .comment-container {
  animation-name: enterAnimation-commentContainer;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.bili-comment.browser-pc {
  background-color: var(--bg1);
}
.bili-comment.browser-pc * {
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 400;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .bili-comment.browser-pc * {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.bili-comment.browser-pc * ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.bili-comment.browser-pc * a {
  text-decoration: none;
  background-color: transparent;
  color: var(--text_link);
  cursor: pointer;
}
.bili-comment.browser-pc * a:hover {
  color: var(--Lb4);
}
.bili-comment.browser-pc * i {
  font-style: normal;
}
.bili-comment.browser-pc * p {
  margin: 0;
  padding: 0;
}
.bili-comment.browser-pc .comment-container {
  animation-name: enterAnimation-commentContainer;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
@font-face {
  font-family: Reeji-CloudHuPo-GBK;
  src: url(data:font/ttf;base64,AAEAAAAKAIAAAwAgT1MvMlbCdMkAAACsAAAAYGNtYXAKGRDxAAABDAAAAUJnbHlm4GQxBQAAAlAAAAS8aGVhZB9yF10AAAcMAAAANmhoZWEGIwIuAAAHRAAAACRobXR4GWwB2wAAB2gAAAAqbG9jYQW0BugAAAeUAAAAGG1heHAADwAvAAAHrAAAACBuYW1lGVKlzAAAB8wAAAGtcG9zdACyAIMAAAl8AAAAOAAEAowBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAgAGAwAAAAAAAAAAAAEQAAAAAAAAAAAAAABQZkVkAMAAMAA5Ayz/LABcAywA1AAAAAEAAAAAAxgAAAAAACAAAQAAAAMAAAADAAAAHAABAAAAAAA8AAMAAQAAABwABAAgAAAABAAEAAEAAAA5//8AAAAw////0QABAAAAAAAAAQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAECAwQFBgcICQoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACACIAAAEyAqoAAwAHAAA3ESERJzMRIyIBEO7MzAACqv1WIgJmAAAAAgAyAAQChALRAA0AFwAAEx4BMz4BNy4BBw4BBzEFBiciNzY3FhcxMgStd4KlAwjBYYmeAQGCA1djCQZUVQUBaK+1A8eavqsBBc+UBNcLzM4CCMgAAQAAAAoBigLWABMAADcWFzY3ESYnBgcGJyIGBwY3MxExugtXagQHSzcrSTkfMgECUGpsYQECbgIWQgQDRU4GIixKAv68AAAAAQA0AAoCggLSACIAACU1Nz4BNS4BJw4BBxYXNjc2Fx4BDwEOARcWFyE2Ny4BKwExAT64RDwFrWyBjgEGRlgOHz1BHEVsjUEQEFABiE8HAjch6rIEcituL2p3AQV/RF0FBERNBwaAMkRZbDMzBQJUKycAAAABAD4ACgJ0AtYALQAAAT4BNS4BJw4BBxYXFjc2FxYXBgcGBxYXFgcWBy4BNy4BBwYHHgEXPgE3Nic1MQIKMCYElW1zmgMDVScfGkhKCANFSgIGSEwCAWcuJQEUMRFQBASeYpSZAQRqAYoZTiNLcwQDYjtOCAMrPAIEQj0HAz9BAQI+UwsDNQQsEwEDX0tYAQWWT1Y8BAAAAAIAJwAKApMC4AAEAB4AAAEjNxUxFRYXNjc1NicmJxEuAScmDwEOARceATczFTEBcKSkB1NpAV8BBFoCRi5URMIkGQECOx/sATzW1tBhAQtXMgJOSwMBNDA9AQJe/i9AKSskATIAAAAAAQBEAAoCcALPACcAAAEzNjcmJyEmDwEGFhc+ATcWFwYHLgEnDgEVHgEzPgE1LgEnDgEHNzEBCOJZAwhY/vZXFyYEKzcoSSdeBAVhK0MqKDQDi16kmgaZTztSARQCJgNLTwcFW+YVOwICIQMGYFsDBD0FAzgbP0UGok5vcAEDHwJqAAAAAgBGAAYCmALWABsAJwAAEx4BNz4BNy4BBw4BBz4BMx4BFzY3LgEnDgEHMQUOAScmJzY3HgEXMUYJ11iBlwIHo0o/UAECQykqPDJICgeZQpesAQGKAzwbUwcJUSovAQFixpYEA4Ved2oBBCsBV08FPQQFUz1AAQTOom4zLAEDV1UFAjUfAAAAAAEAHgAKAmACzAAYAAABBgIXHgEzMjc+ATc+ATcuAQchBgcWFyExAYx3agEBMyBkEA1cKyssAQdVBv54TwkFUwEWAiaP/vUwKSmEUMY6ODsfQBwCAlJMBAADAEYACgKZAtYACgAUAC4AAAEmNxYXDgEjJicxAzY3FhcGByYnMQMeATcOARceARc+AScuASc+ATUuAScOAQcxARwBU1EBAjIeTQUICVFSCAJcTwe6BVEGQi4CBbRtnI8BBVEcLy8Fn2iFmAEB/EAKC0EfJwRE/u5SCAFbTggDVQEsUkcBGlg6Wm0BBY1IRksJGFcpTHEDBHVHAAACAEYACQKZAtYAGgAmAAABNjcOASMuAScGBx4BNz4BJy4BJw4BBx4BNzE3BgcmJzQ2Nx4BFzEBOE9BAkAsLUMsRgYGlkSwlwEGvXeDlAEHpkWICVNTBTAqIjYCAQgCMlFZBDsFA1FAOQEJ6HG0tQEFkld9ZQLgUwcJUSE3AgIzJQAAAAABAAAAAQAAZYdqzl8PPPUACwQAAAAAAN7dacAAAAAA3t1pwAAAAAACmQLgAAAACAACAAAAAAAAAAEAAAMs/ywAXALeAAAAGQKZAAEAAAAAAAAAAAAAAAAAAAAKAXYAIgK4ADIB8AAAArwANAKuAD4CrAAnArYARALeAEYCgAAeAt4ARgBGAAAAAAAUAD4AYgCcAOgBHAFeAaIBzgIcAl4AAQAAAAsALwADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAlgABAAAAAAABAAoAAAABAAAAAAACAAYACgABAAAAAAADABsAEAABAAAAAAAEAAoAKwABAAAAAAAFAB4ANQABAAAAAAAGAAoAUwADAAEECQABABQAXQADAAEECQACAAwAcQADAAEECQADADYAfQADAAEECQAEABQAswADAAEECQAFADwAxwADAAEECQAGABQBA2ZvbnRlZGl0b3JNZWRpdW1Gb250RWRpdG9yIDEuMCA6IGZvbnRlZGl0b3Jmb250ZWRpdG9yVmVyc2lvbiAxLjA7IEZvbnRFZGl0b3IgKHYxLjApZm9udGVkaXRvcgBmAG8AbgB0AGUAZABpAHQAbwByAE0AZQBkAGkAdQBtAEYAbwBuAHQARQBkAGkAdABvAHIAIAAxAC4AMAAgADoAIABmAG8AbgB0AGUAZABpAHQAbwByAGYAbwBuAHQAZQBkAGkAdABvAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwADsAIABGAG8AbgB0AEUAZABpAHQAbwByACAAKAB2ADEALgAwACkAZgBvAG4AdABlAGQAaQB0AG8AcgAAAAACAAAAAAAAADIAAAAAAAAAAAAAAAAAAAAAAAAAAAALAAsAAAATABQAFQAWABcAGAAZABoAGwAc);
}
.reply-item[data-v-bc6a99fc] {
  position: relative;
}
.reply-item .login-limit-mask[data-v-bc6a99fc] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}
.reply-item .login-limit-mask .mask-top[data-v-bc6a99fc] {
  height: 80%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    var(--bg1) 100%
  );
}
.reply-item .login-limit-mask .mask-bottom[data-v-bc6a99fc] {
  height: 20%;
  background: var(--bg1);
}
.reply-item.login-limit-reply-end .login-limit-mask[data-v-bc6a99fc] {
  display: block;
}
.reply-item .root-reply-container[data-v-bc6a99fc] {
  padding: 22px 0 0 80px;
}
.reply-item .root-reply-container.show-reply[data-v-bc6a99fc] {
  animation-name: enterAnimation-jumpReply-bc6a99fc;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}
.reply-item .root-reply-container .root-reply-avatar[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  width: 80px;
  cursor: pointer;
}
.reply-item .root-reply-container .content-warp[data-v-bc6a99fc] {
  flex: 1;
  position: relative;
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate[data-v-bc6a99fc] {
  position: absolute;
  top: 0;
  right: 0;
  user-select: none;
  transform: translateY(-15px);
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate
  .selected-reply
  .selected-reply-icon[data-v-bc6a99fc] {
  width: var(--7f5d3be1);
  height: var(--527b466c);
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate
  .user-sailing[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate
  .user-sailing
  .user-sailing-img[data-v-bc6a99fc] {
  height: 48px;
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate
  .user-sailing
  .user-sailing-text[data-v-bc6a99fc] {
  position: absolute;
  right: 0;
  font-size: 13px;
  color: var(--0d14a680);
  line-height: 16px;
  word-break: keep-all;
  transform: scale(0.7);
  transform-origin: center center;
}
.reply-item
  .root-reply-container
  .content-warp
  .reply-decorate
  .user-sailing
  .user-sailing-text
  .sailing-text[data-v-bc6a99fc] {
  font-family: fanscard;
}
.reply-item .root-reply-container .content-warp .user-info[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
@media screen and (max-width: 1681px) {
  .reply-item .root-reply-container .content-warp .user-info[data-v-bc6a99fc] {
    font-size: 13px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-item .root-reply-container .content-warp .user-info[data-v-bc6a99fc] {
    font-size: 14px;
  }
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .user-name[data-v-bc6a99fc] {
  font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  margin-right: 5px;
  color: var(--5ed7e7ae);
  cursor: pointer;
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .reply-item
    .root-reply-container
    .content-warp
    .user-info
    .user-name[data-v-bc6a99fc] {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .user-level[data-v-bc6a99fc] {
  cursor: pointer;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .up-icon[data-v-bc6a99fc] {
  cursor: default;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .contractor-box[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--2234094f);
  height: 12px;
  padding: 2px;
  border-radius: 2px;
  background-color: var(--brand_pink_thin);
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .contractor-box.originalFan[data-v-bc6a99fc] {
  border: 0.5px solid var(--brand_pink);
  background-color: transparent;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .contractor-box
  .contractor-text[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(2 * 8px);
  transform-origin: center center;
  transform: scale(0.5);
  position: absolute;
  color: var(--brand_pink);
  white-space: nowrap;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  height: 14px;
  padding-left: 5px;
  border: 0.5px solid var(--3f814708);
  border-radius: 10px;
  margin-left: 5px;
  background-image: var(--379efbe6);
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-icon-wrap[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  position: relative;
  width: var(--71844f54);
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-icon-wrap
  .badge-frist-icon[data-v-bc6a99fc] {
  position: absolute;
  left: -8px;
  width: 20px;
  height: 20px;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-icon-wrap
  .badge-second-icon[data-v-bc6a99fc] {
  position: absolute;
  right: 0;
  width: 8px;
  height: 11px;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-name-wrap[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--3df01815);
  height: 100%;
  margin-right: 4px;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-name-wrap
  .badge-name[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(2 * 9px);
  transform-origin: center center;
  transform: scale(0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--3491cc49);
  font-weight: 500;
  white-space: nowrap;
  transform: scale(0.5) translate(-50%, -50%);
  transform-origin: 0 0;
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-level-wrap[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 11.5px;
  height: 11.5px;
  border-radius: 50%;
  margin-right: 0.5px;
  background-color: var(--81d6817c);
}
.reply-item
  .root-reply-container
  .content-warp
  .user-info
  .fan-badge
  .badge-level-wrap
  .badge-level[data-v-bc6a99fc] {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(2 * 7px);
  transform-origin: center center;
  transform: scale(0.5);
  position: absolute;
  top: 52%;
  left: 50%;
  font-family: Reeji-CloudHuPo-GBK;
  color: var(--9ec5b8a4);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
  transform: scale(0.5) translate(-50%, -43%);
  transform-origin: 0 0;
}
.reply-item .root-reply-container .content-warp .root-reply[data-v-bc6a99fc] {
  position: relative;
  padding: 2px 0;
}
@media screen and (max-width: 1681px) {
  .reply-item .root-reply-container .content-warp .root-reply[data-v-bc6a99fc] {
    font-size: 15px;
    line-height: 24px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-item .root-reply-container .content-warp .root-reply[data-v-bc6a99fc] {
    font-size: 16px;
    line-height: 26px;
  }
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text3);
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-time[data-v-bc6a99fc] {
  margin-right: var(--a6298614);
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-location[data-v-bc6a99fc] {
  margin-right: 20px;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-like[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  margin-right: 19px;
  cursor: pointer;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-like
  .like-icon[data-v-bc6a99fc] {
  margin-right: 5px;
  color: #9499a0;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-like
  .like-icon[data-v-bc6a99fc]:hover {
  color: #00aeec;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-like
  .like-icon.liked[data-v-bc6a99fc] {
  color: #00aeec;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-dislike[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  margin-right: 19px;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-dislike
  .dislike-icon[data-v-bc6a99fc] {
  color: #9499a0;
  cursor: pointer;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-dislike
  .dislike-icon[data-v-bc6a99fc]:hover {
  color: #00aeec;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-dislike
  .dislike-icon.disliked[data-v-bc6a99fc] {
  color: #00aeec;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-btn[data-v-bc6a99fc] {
  cursor: pointer;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-btn[data-v-bc6a99fc]:hover {
  color: var(--brand_blue);
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-info
  .reply-operation-warp[data-v-bc6a99fc] {
  position: absolute;
  right: 20px;
  display: none;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-tag-list[data-v-bc6a99fc] {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  line-height: 14px;
}
.reply-item
  .root-reply-container
  .content-warp
  .root-reply
  .reply-tag-list
  .reply-tag-item[data-v-bc6a99fc] {
  padding: 5px 6px;
  border-radius: 2px;
  margin-right: 10px;
}
.reply-item
  .root-reply-container:hover
  .content-warp
  .root-reply
  .reply-info
  .reply-operation-warp[data-v-bc6a99fc] {
  display: block;
}
.reply-item .sub-reply-container[data-v-bc6a99fc] {
  padding-left: calc(80px - 8px);
}
.reply-item .reply-box-container[data-v-bc6a99fc] {
  padding: 25px 0 10px 80px;
}
.reply-item .bottom-line[data-v-bc6a99fc] {
  margin-left: 80px;
  border-bottom: 1px solid var(--graph_bg_thick);
  margin-top: 14px;
}
.reply-item .reply-dynamic-card[data-v-bc6a99fc] {
  position: absolute;
  z-index: 10;
  top: 30px;
  left: 400px;
}
@keyframes enterAnimation-jumpReply-bc6a99fc {
  0% {
    background-color: #dff6fb;
  }
  100% {
    background-color: rgba(223, 246, 251, 0);
  }
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.sub-reply-list .view-more[data-v-3f15a7b1] {
  padding-left: 8px;
  font-size: 13px;
  color: var(--text3);
}
.sub-reply-list .view-more .view-more-default .view-more-btn[data-v-3f15a7b1] {
  cursor: pointer;
}
.sub-reply-list
  .view-more
  .view-more-default
  .view-more-btn[data-v-3f15a7b1]:hover {
  color: var(--brand_blue);
}
.sub-reply-list .view-more .view-more-pagination[data-v-3f15a7b1] {
  color: var(--text1);
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-page-count[data-v-3f15a7b1] {
  margin-right: 10px;
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-btn[data-v-3f15a7b1] {
  margin: 0 4 0 14px;
  cursor: pointer;
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-btn[data-v-3f15a7b1]:hover {
  color: var(--brand_blue);
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-page-number[data-v-3f15a7b1] {
  margin: 0 4px;
  cursor: pointer;
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-page-number[data-v-3f15a7b1]:hover {
  color: var(--brand_blue);
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-page-number.current-page[data-v-3f15a7b1] {
  color: var(--brand_blue);
}
.sub-reply-list
  .view-more
  .view-more-pagination
  .pagination-page-dot[data-v-3f15a7b1] {
  margin: 0 4px;
  cursor: default;
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.sub-reply-item[data-v-51959a82] {
  position: relative;
  padding: 8px 0 8px 42px;
  border-radius: 4px;
}
@media screen and (max-width: 1681px) {
  .sub-reply-item[data-v-51959a82] {
    font-size: 15px;
    line-height: 24px;
  }
}
@media screen and (min-width: 1681px) {
  .sub-reply-item[data-v-51959a82] {
    font-size: 16px;
    line-height: 26px;
  }
}
.sub-reply-item.show-reply[data-v-51959a82] {
  background-color: #dff6fb;
  animation-name: enterAnimation-jumpReply-51959a82;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
.sub-reply-item .sub-user-info[data-v-51959a82] {
  display: inline-flex;
  align-items: center;
  margin-right: 9px;
  line-height: 24px;
  vertical-align: baseline;
  white-space: nowrap;
}
.sub-reply-item .sub-user-info .sub-reply-avatar[data-v-51959a82] {
  position: absolute;
  left: 8px;
  cursor: pointer;
}
.sub-reply-item .sub-user-info .sub-user-name[data-v-51959a82] {
  font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  margin-right: 5px;
  color: var(--682f251d);
  cursor: pointer;
}
@media screen and (max-width: 1681px) {
  .sub-reply-item .sub-user-info .sub-user-name[data-v-51959a82] {
    font-size: 13px;
    line-height: 24px;
  }
}
@media screen and (min-width: 1681px) {
  .sub-reply-item .sub-user-info .sub-user-name[data-v-51959a82] {
    font-size: 14px;
    line-height: 26px;
  }
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .sub-reply-item .sub-user-info .sub-user-name[data-v-51959a82] {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.sub-reply-item .sub-user-info .sub-user-level[data-v-51959a82] {
  cursor: pointer;
}
.sub-reply-item .sub-user-info .sub-up-icon[data-v-51959a82] {
  cursor: default;
}
.sub-reply-item .sub-reply-info[data-v-51959a82] {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text3);
}
.sub-reply-item .sub-reply-info .sub-reply-time[data-v-51959a82] {
  margin-right: var(--7607d4a7);
}
.sub-reply-item .sub-reply-info .sub-reply-location[data-v-51959a82] {
  margin-right: 20px;
}
.sub-reply-item .sub-reply-info .sub-reply-like[data-v-51959a82] {
  display: flex;
  align-items: center;
  margin-left: 19px;
  margin-right: 19px;
  cursor: pointer;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-like
  .sub-like-icon[data-v-51959a82] {
  margin-right: 5px;
  color: #9499a0;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-like
  .sub-like-icon[data-v-51959a82]:hover {
  color: #00aeec;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-like
  .sub-like-icon.liked[data-v-51959a82] {
  color: #00aeec;
}
.sub-reply-item .sub-reply-info .sub-reply-dislike[data-v-51959a82] {
  display: flex;
  align-items: center;
  margin-right: 19px;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-dislike
  .sub-dislike-icon[data-v-51959a82] {
  color: #9499a0;
  cursor: pointer;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-dislike
  .sub-dislike-icon[data-v-51959a82]:hover {
  color: #00aeec;
}
.sub-reply-item
  .sub-reply-info
  .sub-reply-dislike
  .sub-dislike-icon.disliked[data-v-51959a82] {
  color: #00aeec;
}
.sub-reply-item .sub-reply-info .sub-reply-btn[data-v-51959a82] {
  cursor: pointer;
}
.sub-reply-item .sub-reply-info .sub-reply-btn[data-v-51959a82]:hover {
  color: var(--brand_blue);
}
.sub-reply-item .sub-reply-info .sub-reply-operation-warp[data-v-51959a82] {
  position: absolute;
  right: 40px;
  opacity: 0;
}
.sub-reply-item:hover
  .sub-reply-info
  .sub-reply-operation-warp[data-v-51959a82] {
  opacity: 1;
}
@keyframes enterAnimation-jumpReply-51959a82 {
  0% {
    background-color: #dff6fb;
  }
  100% {
    background-color: rgba(223, 246, 251, 0);
  }
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.reply-content-container.fold .reply-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.reply-content-container .reply-content {
  color: var(--text1);
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 24px;
  vertical-align: baseline;
}
.reply-content-container .reply-content .note-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 4px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
  color: var(--text3);
  line-height: 20px;
  vertical-align: bottom;
  background-color: var(--bg2);
}
.reply-content-container .reply-content .note-prefix .note-icon {
  width: 16px;
  height: 16px;
}
.reply-content-container .reply-content .top-icon {
  top: -2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 30px;
  height: 18px;
  border: 1px solid var(--brand_pink);
  border-radius: 3px;
  margin-right: 5px;
  font-size: 12px;
  color: var(--brand_pink);
}
.reply-content-container .reply-content .emoji-small {
  vertical-align: text-bottom;
}
@media screen and (max-width: 1681px) {
  .reply-content-container .reply-content .emoji-small {
    width: 20px;
    height: 20px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-content-container .reply-content .emoji-small {
    width: 22px;
    height: 22px;
  }
}
.reply-content-container .reply-content .emoji-large {
  width: 50px;
  height: 50px;
  vertical-align: text-bottom;
}
.reply-content-container .reply-content .icon {
  width: 20px;
  height: 20px;
  vertical-align: text-top;
}
@media screen and (max-width: 1681px) {
  .reply-content-container .reply-content .icon {
    line-height: 24px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-content-container .reply-content .icon {
    line-height: 26px;
  }
}
.reply-content-container .reply-content .icon.search-word {
  width: 12px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}
.reply-content-container .reply-content .jump-link {
  vertical-align: baseline;
}
@media screen and (max-width: 1681px) {
  .reply-content-container .reply-content .jump-link {
    line-height: 24px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-content-container .reply-content .jump-link {
    line-height: 26px;
  }
}
.reply-content-container .expand-content {
  font-size: 14px;
  color: var(--text_link);
  cursor: pointer;
}
.reply-content-container .expand-content:hover {
  color: var(--brand_blue);
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.reply-box[data-v-572457cb] {
  display: flex;
  flex-direction: column;
}
.reply-box .box-normal[data-v-572457cb] {
  display: flex;
  height: 50px;
  transition: 0.2s;
}
.reply-box .box-normal .reply-box-avatar[data-v-572457cb] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 50px;
}
.reply-box .box-normal .reply-box-warp[data-v-572457cb] {
  position: relative;
  flex: 1;
}
.reply-box .box-normal .reply-box-warp .reply-input[data-v-572457cb] {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: 1px solid var(--Ga1);
  border-radius: 6px;
  background-color: var(--bg3);
  font-family: inherit;
  line-height: 38px;
  color: var(--text1);
  resize: none;
  outline: none;
  overflow-y: scroll;
  overflow-x: hidden;
}
.reply-box .box-normal .reply-box-warp .reply-input.focus[data-v-572457cb],
.reply-box .box-normal .reply-box-warp .reply-input[data-v-572457cb]:hover {
  background-color: var(--bg1);
  border-color: var(--graph_weak);
}
.reply-box .box-normal .reply-box-warp .reply-box-textarea[data-v-572457cb] {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  border: 1px solid var(--Ga1);
  border-radius: 6px;
  background-color: var(--bg3);
  font-family: inherit;
  line-height: 38px;
  color: var(--text1);
  resize: none;
  outline: none;
}
.reply-box
  .box-normal
  .reply-box-warp
  .reply-box-textarea[data-v-572457cb]::placeholder {
  color: var(--text3);
}
.reply-box
  .box-normal
  .reply-box-warp
  .reply-box-textarea.focus[data-v-572457cb],
.reply-box
  .box-normal
  .reply-box-warp
  .reply-box-textarea[data-v-572457cb]:hover {
  background-color: var(--bg1);
  border-color: var(--graph_weak);
}
.reply-box .box-normal .reply-box-send[data-v-572457cb] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-basis: 70px;
  margin-left: 10px;
  border-radius: 4px;
  cursor: pointer;
}
.reply-box .box-normal .reply-box-send .send-text[data-v-572457cb] {
  position: absolute;
  z-index: 1;
  font-size: 16px;
  color: var(--text_white);
}
.reply-box .box-normal .reply-box-send[data-v-572457cb]::after {
  content: "";
  position: absolute;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: var(--brand_blue);
}
.reply-box .box-normal .reply-box-send[data-v-572457cb]:hover::after {
  opacity: 1;
}
.reply-box .box-expand[data-v-572457cb] {
  display: flex;
  align-items: center;
  margin-left: 80px;
  margin-top: 5px;
}
.reply-box .box-expand .reply-box-emoji[data-v-572457cb] {
  width: 32px;
  height: 26px;
  margin-right: 6px;
  position: relative;
}
.reply-box .box-expand .reply-box-emoji .emoji-btn[data-v-572457cb] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--Ga1);
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
}
.reply-box .box-expand .at-btn[data-v-572457cb] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 32px;
  height: 26px;
  border: 1px solid var(--Ga1);
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
}
.reply-box .box-expand .forward-to-dynamic[data-v-572457cb] {
  display: flex;
  align-items: center;
  margin-left: 16px;
  font-size: 12px;
  color: var(--text3);
}
.reply-box .box-expand .forward-to-dynamic .forward-input[data-v-572457cb],
.reply-box .box-expand .forward-to-dynamic .forward-label[data-v-572457cb] {
  cursor: pointer;
}
.reply-box.box-active .box-normal[data-v-572457cb] {
  height: 65px;
}
.reply-box.box-active
  .box-normal
  .reply-box-warp
  .reply-box-textarea.send-active[data-v-572457cb] {
  line-height: normal;
}
.reply-box.box-active
  .box-normal
  .reply-box-send.send-active[data-v-572457cb]::after {
  opacity: 1;
}
.reply-box.disabled .box-normal .reply-box-warp .disable-mask[data-v-572457cb] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text3);
  background-color: var(--bg3);
}
.reply-box.disabled
  .box-normal
  .reply-box-warp
  .disable-mask
  .no-login-mask[data-v-572457cb] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.reply-box.disabled
  .box-normal
  .reply-box-warp
  .disable-mask
  .no-login-mask
  .login-btn[data-v-572457cb] {
  padding: 4px 9px;
  margin: 0 3px;
  border-radius: 4px;
  color: var(--text_white);
  background-color: var(--brand_blue);
}
.reply-box.disabled
  .box-normal
  .reply-box-warp
  .disable-mask
  .no-login-mask
  .login-btn[data-v-572457cb]:hover {
  background-color: var(--Lb4);
  cursor: pointer;
}
.reply-box.disabled .box-normal .reply-box-send .send-text[data-v-572457cb] {
  color: var(--text3);
}
.reply-box.disabled .box-normal .reply-box-send[data-v-572457cb]::after {
  opacity: 1;
  background-color: var(--bg3);
}
.reply-box.fixed-box[data-v-572457cb] {
  position: relative;
  z-index: 2;
  padding: 15px 0;
  border-top: 0.5px solid var(--graph_bg_thick);
  background-color: var(--bg1);
}
.reply-box.fixed-box .box-normal[data-v-572457cb] {
  height: 40px;
}
.reply-box.fixed-box .box-normal .reply-box-avatar[data-v-572457cb] {
  height: 40px;
}
.reply-box.fixed-box
  .box-normal
  .reply-box-warp
  .reply-box-textarea[data-v-572457cb] {
  line-height: 28px;
}
.reply-box.fixed-box.box-active .box-normal[data-v-572457cb] {
  height: 65px;
}
@font-face {
  font-family: "fanscard";
  src: url("//s1.hdslb.com/bfs/static/jinkela/mall-h5/asserts/fansCard.ttf");
}
.reply-header .reply-notice[data-v-7bb97476] {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  padding: 4px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  border-radius: 2px;
  color: var(--Ye5_u);
  cursor: pointer;
}
.reply-header .reply-notice[data-v-7bb97476]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--Ye5_u);
  opacity: 0.2;
}
.reply-header .reply-notice .notice-icon[data-v-7bb97476] {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.reply-header .reply-notice .notice-content[data-v-7bb97476] {
  flex: 1;
  padding: 0 5px;
  vertical-align: top;
  word-wrap: break-word;
  word-break: break-all;
}
.reply-header .reply-notice .notice-close-icon[data-v-7bb97476] {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
.reply-header .reply-navigation[data-v-7bb97476] {
  margin-bottom: 22px;
}
.reply-header .reply-navigation .nav-bar[data-v-7bb97476] {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.reply-header .reply-navigation .nav-bar .nav-title[data-v-7bb97476] {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-title[data-v-7bb97476] {
    font-size: 20px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-title[data-v-7bb97476] {
    font-size: 24px;
  }
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-title
  .nav-title-text[data-v-7bb97476] {
  color: var(--text1);
  font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .reply-header
    .reply-navigation
    .nav-bar
    .nav-title
    .nav-title-text[data-v-7bb97476] {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-title
  .total-reply[data-v-7bb97476] {
  margin: 0 36px 0 6px;
  font-weight: normal;
  color: var(--text3);
}
@media screen and (max-width: 1681px) {
  .reply-header
    .reply-navigation
    .nav-bar
    .nav-title
    .total-reply[data-v-7bb97476] {
    font-size: 13px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-header
    .reply-navigation
    .nav-bar
    .nav-title
    .total-reply[data-v-7bb97476] {
    font-size: 14px;
  }
}
.reply-header .reply-navigation .nav-bar .nav-select-reply[data-v-7bb97476] {
  font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  color: var(--text1);
}
@media screen and (max-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-select-reply[data-v-7bb97476] {
    font-size: 13px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-select-reply[data-v-7bb97476] {
    font-size: 16px;
  }
}
@media (-webkit-max-device-pixel-ratio: 1) {
  .reply-header .reply-navigation .nav-bar .nav-select-reply[data-v-7bb97476] {
    font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
      Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  }
}
.reply-header .reply-navigation .nav-bar .nav-sort[data-v-7bb97476] {
  display: flex;
  align-items: center;
  color: var(--text3);
}
@media screen and (max-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-sort[data-v-7bb97476] {
    font-size: 13px;
  }
}
@media screen and (min-width: 1681px) {
  .reply-header .reply-navigation .nav-bar .nav-sort[data-v-7bb97476] {
    font-size: 16px;
  }
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-sort
  .part-symbol[data-v-7bb97476] {
  height: 11px;
  margin: 0 12px;
  border-left: solid 1px;
}
.reply-header .reply-navigation .nav-bar .nav-sort .hot-sort[data-v-7bb97476] {
  cursor: pointer;
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-sort
  .hot-sort[data-v-7bb97476]:hover {
  color: var(--brand_blue);
}
.reply-header .reply-navigation .nav-bar .nav-sort .time-sort[data-v-7bb97476] {
  cursor: pointer;
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-sort
  .time-sort[data-v-7bb97476]:hover {
  color: var(--brand_blue);
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-sort.hot
  .hot-sort[data-v-7bb97476] {
  color: var(--text1);
}
.reply-header
  .reply-navigation
  .nav-bar
  .nav-sort.time
  .time-sort[data-v-7bb97476] {
  color: var(--text1);
}
.reply-header .reply-navigation .nav-operation-warp[data-v-7bb97476] {
  position: absolute;
  right: 0;
}

.st0.lv6 {
  fill: transparent;
}

.st1.lv6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st2.lv6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #f04c49;
}

.st0.lv5 {
  fill: transparent;
}

.st1.lv5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st2.lv5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ee672a;
}
.st0.lv2 {
  fill: transparent;
}

.st1.lv2 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st2.lv2 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #8bd29b;
}
.st0.lv5 {
  fill: transparent;
}

.st1.lv5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st2.lv5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ee672a;
}
.st0.lv6 {
  fill: transparent;
}

.st1.lv6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #ffffff;
}

.st2.lv6 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #f04c49;
}
</style>